<template>
  <div class="wrap">
    <div class="socket-tip">
      <span class="success" v-show="socketState">websocket 已链接</span>
      <span class="error" v-show="!socketState">websocket 未连接</span>
      <div class="animate" v-show="socketState">
        <span class="s1"></span>
        <span class="s2"></span>
        <span class="s3"></span>
        <span class="s4"></span>
        <span class="s5"></span>
        <span class="s6"></span>
        <span class="s7"></span>
        <span class="s8"></span>
        <span class="s9"></span>
        <span class="s10"></span>
      </div>
    </div>
    <div class="chart">
      <div class="main" id="echart1"></div>
      <div class="tip">近一周内简历的访问量</div>
    </div>
    <div class="chart">
      <div class="main" id="echart2"></div>
      <div class="tip">近一周内音乐的访问量</div>
    </div>
    <div class="chart">
      <div class="main" id="echart3"></div>
      <div class="tip">近一周内简历和音乐访问量占比</div>
    </div>
    <div class="chart">
      <div class="main" id="echart4"></div>
      <div class="tip">音乐总数和mv总数</div>
    </div>
    <div class="chart">
      <div class="main" id="css-animate">
        <div class="wall"></div>
        <div class="floor">
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
          <div class="i"></div>
        </div>
        <div class="zuo">
          <div class="level1">
            <div class="level2">
              <div class="level3">
                <img class="header" src="http://m.liyefeng.top/static/upload/banner/1711533935myhead.jpg" >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tip">手写css3动画</div>
    </div>
    <div class="chart" >
      <div class="main" id="echart5"></div>
      <div class="tip">近一周内动态的访问量</div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, reactive, ref ,onBeforeUnmount} from 'vue'
import {useRouter} from 'vue-router'
import { getJianLiData, getMusicData, getMusicTotal, getNewsList } from '../apis/home'
import {useCount,useCountRef} from "../stores/count"
import { storeToRefs } from 'pinia';
const router=useRouter()
// let store=useCount()
// let {num} =storeToRefs(store)
let store=useCountRef()
let {num} = store
const sum=()=>{
  store.add()
}
const min=()=>{
  store.min()
}
let token=sessionStorage.getItem("token")
const env = process.env.NODE_ENV
const url = env == 'development' ? "ws://localhost:8088/ws?token=" + token : "ws://114.116.249.103:8088/ws?token=" + token
const websocket = new WebSocket(url)
let socketState = ref(true)
websocket.onopen = (evt) => {
  console.log("链接成功")
  socketState.value = true
}
websocket.onmessage = (evt) => {
  if (evt.data == "jianli") {
    refreshChartJL()
  } else if (evt.data == "music") {
    refreshChartMusic()
  }
}
websocket.onclose = () => {
  console.log("链接关闭")
  socketState.value = false
}

let week = ref([])
let dataList1 = ref([])
let dataList2 = ref([])
let dataList3 = ref([])
const getAllData = () => {
  Promise.all([getJianLi(), getMusic()]).then(res => {
    let totalJ = 0
    let totalM = 0
    res[0].data.data.forEach(num => {
      totalJ += num
    })
    res[1].data.data.forEach(num => {
      totalM += num
    })
    let list = [
      { value: totalJ, name: "简历" },
      { value: totalM, name: "音乐" },
    ]
    dataList3.value = list
    initChart3(list)
  })
}
const allChartArr=[null,null,null,null,null]
onMounted(async () => {
  getNearWeek()
  getMusicTotalFn()
  getNewsListFn()
  const echart1 = document.getElementById("echart1");
  echart1.removeAttribute("_echarts_instance_");
  let charts2 = document.getElementById("echart2")
  let charts3 = document.getElementById("echart3")
  let musicToatl = document.getElementById("echart4")
  let charts5 = document.getElementById("echart5")
  charts2.removeAttribute("_echarts_instance_");
  charts3.removeAttribute("_echarts_instance_");
  musicToatl.removeAttribute("_echarts_instance_");
  charts5.removeAttribute("_echarts_instance_");
  getAllData()
  window.addEventListener("resize",()=>{
    allChartArr.forEach(e=>{
      if(e){
        e.resize()
      }
    })
  })
})
onBeforeUnmount(()=>{
  // 组件卸载之前要把echarts实例销毁
  if(allChartArr.length){
    allChartArr.forEach(e=>{
      if(e){
        e.dispose()
      }
    })
  }
})
const refreshChartJL = () => {
  dataList1.value[6] += 1
  dataList3.value[0].value += 1
  initChart1(dataList1.value)
  initChart3(dataList3.value)
}
const refreshChartMusic = () => {
  dataList2.value[6] += 1
  dataList3.value[1].value += 1
  initChartMusic(dataList2.value)
  initChart3(dataList3.value)
}
const initChart1 = (arr) => {
  let charts1 = echarts.init(document.getElementById("echart1"))
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: week.value
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        data: arr,
        type: 'line',
        label: {
          show: true,
          position: 'top',
        },
        smooth: true
      }
    ]
  };
  charts1.setOption(option)
  allChartArr[0]=charts1
}
const initChartMusic = (arr) => {
  let charts2 = echarts.init(document.getElementById("echart2"))
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: week.value
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        data: arr,
        type: 'bar',
        label: {
          show: true,
          position: 'top',
        },
        itemStyle: {
          color: '#9eca7f'
        }
      }
    ]
  };
  charts2.setOption(option)
  allChartArr[1]=charts2
}
const initChart3 = (arr) => {
  let charts3 = echarts.init(document.getElementById("echart3"))
  let option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center',
      formatter: (name) => {
        let target = arr.find(e => e.name == name)
        return `${name}:${target.value}次`
      }
    },
    series: [
      {
        name: '访问量',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          formatter: '{d}%',
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 30,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: arr
      }
    ]
  };
  charts3.setOption(option)
  allChartArr[2]=charts3
}
const initMusicAndMvTotal = (songTotal = 0, videoTotal = 0) => {
  let musicToatl = echarts.init(document.getElementById("echart4"))
  let option = {
    color: ['#f9c956', '#3BA272', '#9A60B4', '#ef6567'],
    title: {
      text: '',
      subtext: '资源总数',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '15%',
      orient: 'vertical',
      formatter: (name) => {
        let target = option.series[0].data.find(e => e.name == name)
        return `${name}:${target.value}个`
      },
      left: 'left'
    },
    series: [
      {
        name: '资源类型',
        type: 'pie',
        radius: '50%',
        data: [
          { value: videoTotal, name: 'MV总数' },
          { value: songTotal, name: '音乐总数' },
        ],
        label: {
          normal: {
            formatter: '{b},占比: {d}%'
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  musicToatl.setOption(option)
  allChartArr[3]=musicToatl
  musicToatl.setOption({
    title: {
      subtext: `资源总数量 ${songTotal + videoTotal} 个`
    }
  })
}
const initChartDT = (arrIndex,arrDetail) => {
  let charts5 = echarts.init(document.getElementById("echart5"))
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      top: '5%',
      left: 'center',
      show: true,
        // 图例布局方向，水平或垂直
        orient: 'horizontal',
        // 图例标记的图形类型，默认为'rect'
        icon: 'rect',
        // 图例文本样式
        textStyle: {
            color: '#333',
            fontSize: 12
        },
        // 图例的数据数组，每个名称代表一个系列
        data: ['新闻主页', '新闻详情']
    },
    xAxis: {
      type: 'category',
      data: week.value
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        name:'新闻主页',
        data: arrIndex,
        type: 'bar',
        label: {
          show: true,
          position: 'top',
        },
        itemStyle: {
          color: '#9eca7f'
        }
      },
      {
        name:'新闻详情',
        data: arrDetail,
        type: 'bar',
        label: {
          show: true,
          position: 'top',
        },
        itemStyle: {
          color: '#48e6cc'
        }
      }
    ]
  };
  charts5.setOption(option)
  allChartArr[4]=charts5
}

const getJianLi = async () => {
  let res = await getJianLiData()
  if (res.status == 200) {
    dataList1.value = res.data.data
    initChart1(res.data.data)
  }
  return res
}
const getMusic = async () => {
  let res = await getMusicData()
  if (res.status == 200) {
    dataList2.value = res.data.data
    initChartMusic(res.data.data)
  }
  return res
}
const getMusicTotalFn = async () => {
  let res = await getMusicTotal({})
  if (res.status == 200) {
    let { songTotal, videoTotal } = res.data
    initMusicAndMvTotal(songTotal, videoTotal)
  }
}
const getNewsListFn = async () => {
  let res = await getNewsList({})
  console.log('rrrrr',res)
  if (res.status == 200) {
    let list = res.data.data
    let arrIndex=[]
    let arrDetail=[]
    list.forEach(item=>{
      arrIndex.push(item.index)
      arrDetail.push(item.detail)
    })
    console.log('arrIndex',arrIndex,'arrDetai',arrDetail)
    initChartDT(arrIndex,arrDetail)
  }
}
const getNearWeek = () => {
  let t1 = getPreveDay()
  let t2 = getPreveDay(1)
  let t3 = getPreveDay(2)
  let t4 = getPreveDay(3)
  let t5 = getPreveDay(4)
  let t6 = getPreveDay(5)
  let t7 = getPreveDay(6)
  week.value = [t7, t6, t5, t4, t3, t2, t1]
}
const getPreveDay = (n = 0) => {
  let t = Date.parse(new Date())
  let d = new Date(parseInt(t - 86400000 * n))
  let month = d.getMonth() + 1
  let day = d.getDate()
  return `${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
}
</script>
<style lang="less" scoped>
@keyframes linkMoving {
  0%{
    height: 10%;
  }
  100%{
    height: 100%;
  }
}
.wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  transform-style: preserve-3d;
  .socket-tip {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: rgb(195, 219, 247);
    text-align: center;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    .success {
      color: green;
    }

    .error {
      color: rgb(223, 42, 22);
    }
    .animate{
      width: 100px;
      height: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-left: 10px;
      span{
        width: 6%;
        height: 10%;
        background: rgb(65, 207, 65);
        border-radius: 3px;
      }
      .s1{
        animation: linkMoving 1s linear infinite alternate;
      }
      .s2{
        animation: linkMoving 1s 0.2s linear infinite alternate;
      }
      .s3{
        animation: linkMoving 1s 0.4s linear infinite alternate;
      }
      .s4{
        animation: linkMoving 1s 0.6s linear infinite alternate;
      }
      .s5{
        animation: linkMoving 1s 0.8s linear infinite alternate;
      }
      .s6{
        animation: linkMoving 1s 1s linear infinite alternate;
      }
      .s7{
        animation: linkMoving 1s 1.2s linear infinite alternate;
      }
      .s8{
        animation: linkMoving 1s 1.4s linear infinite alternate;
      }
      .s9{
        animation: linkMoving 1s 1.6s linear infinite alternate;
      }
      .s10{
        animation: linkMoving 1s 1.8s linear infinite alternate;
      }
    }
  }

  .chart {
    width: 33.33%;
    min-width: 400px;
    height: 400px;
    box-shadow: inset 0 0 1px rgb(48, 45, 241);

    .tip {
      color: black;
      text-align: center;
      font-size: 20px;
      line-height: 60px;
    }
  }

  .main {
    width: 100%;
    height: 80%;
  }
  @keyframes round1 {
    0%{
      transform: translateZ(0px) rotateZ(0deg);
    }
    100%{
      transform:translateZ(0px) rotateZ(360deg);
    }
  }
  @keyframes round2 {
    0%{
      transform: translateZ(5px) rotateZ(0deg);
    }
    50%{
      transform: translateZ(20px) rotateZ(180deg);
    }
    100%{
      transform: translateZ(5px) rotateZ(360deg);
    }
  }
  @keyframes round3 {
    0%{
      transform: translateZ(5px) rotateZ(0deg);
    }
    50%{
      transform: translateZ(10px) rotateZ(180deg);
    }
    100%{
      transform: translateZ(5px) rotateZ(360deg);
    }
  }
  @keyframes round-img {
    0%{
      transform:rotateZ(0deg) rotateX(-90deg) translateY(-80px) scale(1);
      clip-path: ellipse(50% 30% at 50% 50%);
    }
    50%{
      transform:rotateZ(-180deg) rotateX(-90deg) translateY(-100px) scale(1.1);
      clip-path: ellipse(30% 50% at 50% 50%)
    }
    100%{
      transform:rotateZ(-360deg) rotateX(-90deg) translateY(-80px) scale(1);
      clip-path: ellipse(50% 30% at 50% 50%);
    }
  }
  #css-animate {
    perspective: 8000px;
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
    .wall{
      position: absolute;
      top: -6px;
      left: 50%;
      width: 530px;
      height: 260px;
      background: url("http://m.liyefeng.top/static/upload/banner/1711539634666.jpg") no-repeat center;
      background-size: 100% 100%;
      transform:translateX(-50%) translateZ(-300px);
    }
    .floor{
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 650px;
      height: 990px;
      background: rgb(175, 173, 173);
      transform-origin: bottom center;
      transform:rotateX(70deg) translateX(-50%) translateZ(-300px);
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(20, 1fr);
      grid-gap: 10px;
      .i{
        background: rgb(247, 247, 249);
      }
        
    }
    .zuo{
      position: absolute;
      top:0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 390px;
      height: 390px;
      transform-origin: center 340px;
      transform: rotateX(80deg);
      transform-style: preserve-3d;
      perspective: 8000px;
    }
    .level1 {
      position: absolute;
      top:0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      width: 390px;
      height: 390px;
      background: url('http://m.liyefeng.top/static/upload/banner/1711528762round2.png') no-repeat;
      background-size: 100% 100%;
      animation: round1 15s linear infinite;
      perspective: 8000px;
      transform-style: preserve-3d;
      .level2{
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 290px;
        height: 290px;
        background: url('http://m.liyefeng.top/static/upload/banner/1711528762round2.png') no-repeat;
        background-size: 100% 100%;
        perspective: 8000px;
        transform-style: preserve-3d;
        animation: round2 5s linear infinite;
        .level3{
          position: absolute;
          top:0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          width: 210px;
          height: 210px;
          background: url('http://m.liyefeng.top/static/upload/banner/1711528762round2.png') no-repeat;
          background-size: 100% 100%;
          animation: round3 2.5s linear infinite;
          perspective: 8000px;
          transform-style: preserve-3d;
          .header{
            position: absolute;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            animation: round-img 1.5s linear infinite;
          }
        }
      }
    }
  }
}
</style>